/**
  学生信息管理
*/
<template>
    <div class="edit-dom-container">
        <template v-if="!fieldInfo.inHide">
            <template v-if="fieldInfo.type === 'input'">
                <!-- 导师1、导师2开始 -->
                <select-For-Page
                    v-if="fieldInfo.fieldId === 77 || fieldInfo.fieldId === 78"
                    URL="/api/studentservice/userInfo/studentOrTeacherPageList"
                    v-model="fieldInfo.columnValue"
                    :queryType="1"
                    :val="fieldInfo.columnValue"
                    @return-value-to-label="getValueToLabel">
                </select-For-Page>
                <!-- 导师1、导师2结束 -->
                <!-- 火车起点站开始 -->
                <el-input
                    v-else-if="fieldInfo.fieldId === 24"
                    disabled
                    v-model="fieldInfo.columnValue"
                    style="width:100%">
                </el-input>
                <!-- 火车起点站结束 -->
                <el-input
                    v-else
                    v-model="fieldInfo.columnValue"
                    :maxlength="fieldInfo.length"
                    style="width:100%">
                </el-input>
            </template>
            <template v-if="fieldInfo.type === 'select'">
                <!-- 火车终点站开始 -->
                <pager-select
                    v-if="fieldInfo.fieldId === 25 && endStation.length > 0"
                    :data="endStation"
                    :notClear="true"
                    v-model="fieldInfo.columnValue">
                </pager-select>
                <!-- 火车终点站结束 -->
                <!-- 教育背景--学位专业146,硕士学位专业219,博士学位专业233开始 -->
                <span v-else-if="fieldInfo.column === 'MAJOR_CODE_' && fieldInfo.chooseType">
                    <el-select
                        v-model="fieldInfo.chooseType"
                        style="width: 30%;"
                        @change="changeChooseType">
                        <el-option :label="$t('student.input')" value="input"></el-option>
                        <el-option :label="$t('student.choose')" value="select"></el-option>
                    </el-select>
                    <el-input
                        v-if="fieldInfo.chooseType === 'input'"
                        v-model="fieldInfo.columnValue"
                        :maxlength="fieldInfo.length"
                        style="width: 68%">
                    </el-input>
                    <pager-select
                        v-else
                        style="display: inline-block;width: 68%;"
                        :data="options"
                        :notClear="true"
                        v-model="fieldInfo.columnValue">
                    </pager-select>
                </span>
                <!-- 教育背景--学位专业结束 -->
                <!-- judgePagerSelect开始 -->
                <pager-select
                    v-else-if="judgePagerSelect(fieldInfo.value)"
                    :data="options"
                    :notClear="true"
                    v-model="fieldInfo.columnValue"
                    @input="changePagerSelect">
                </pager-select>
                <!-- judgePagerSelect结束 -->
                <!-- 籍贯、详细区域开始 -->
                <select-tree
                    v-else-if="fieldInfo.value === 'G_XZQY' && citys.length > 0"
                    :data="citys"
                    v-model="fieldInfo.columnValue"
                />
                <!-- 籍贯、详细区域结束 -->
                <!-- 学籍专业开始 -->
                <el-select
                    v-else-if="fieldInfo.fieldId === 68"
                    v-model="fieldInfo.columnValue"
                    style="width:100%"
                    :filterable="fieldInfo.isSearch"
                    @change="handleRalationField">
                    <el-option
                        v-for="(item, _index) in XJZYOptions"
                        :key="_index"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
                <!-- 学籍专业结束 -->
                <!-- 对方院校、院所开始 -->
                <el-select
                    v-else-if="fieldInfo.fieldId === 166"
                    v-model="fieldInfo.columnValue"
                    style="width:100%"
                    :filterable="fieldInfo.isSearch">
                    <el-option
                        v-for="item in unionCollegeData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
                <!-- 对方院校、院所结束 -->
                <!-- 专业方向名称开始 -->
                <el-select
                    v-else-if="fieldInfo.fieldId === 70"
                    v-model="fieldInfo.columnValue"
                    style="width:100%"
                    :filterable="fieldInfo.isSearch">
                    <el-option
                        v-for="item in ZYFXMCOptions"
                        :key="item.value"
                        :label="item.label + '(' + item.value + ')'"
                        :value="item.value"
                    />
                </el-select>
                <!-- 专业方向名称结束 -->
                <!-- 培养专业开始 -->
                <el-select
                    v-else-if="fieldInfo.fieldId === 69"
                    v-model="fieldInfo.columnValue"
                    style="width:100%"
                    :multiple="fieldInfo.isMulti"
                    :collapse-tags="fieldInfo.isMulti"
                    :filterable="fieldInfo.isSearch"
                    @change="handleRalationField">
                    <el-option
                        v-for="(item, _index) in options"
                        :key="_index"
                        :label="item.label+'('+ item.value +')'"
                        :value="item.value"
                    ></el-option>
                </el-select>
                <!-- 培养专业结束 -->
                <!-- 普通下拉框开始 -->
                <!-- 招生专业禁止修改,fieldId为67 -->
                <el-select
                    v-else
                    v-model="fieldInfo.columnValue"
                    style="width:100%"
                    :disabled="fieldInfo.fieldId === 67"
                    :multiple="fieldInfo.isMulti"
                    :collapse-tags="fieldInfo.isMulti"
                    :filterable="fieldInfo.isSearch"
                    @change="handleRalationField">
                    <el-option
                        v-for="(item, _index) in options"
                        :key="_index"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
                <!-- 普通下拉框结束 -->
            </template>
            <el-date-picker
                v-if="fieldInfo.type === 'year'"
                v-model="fieldInfo.columnValue"
                type="year"
                value-format="yyyy"
                placeholder="选择年"
                style="width:100%"
                @change="(value) => gradeChange(value)">
            </el-date-picker>
            <el-date-picker
                v-if="fieldInfo.type === 'date'"
                v-model="fieldInfo.columnValue"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width:100%">
            </el-date-picker>
            <el-input
                v-if="fieldInfo.type === 'textarea'"
                type="textarea"
                rows="3"
                v-model="fieldInfo.columnValue"
                :maxlength="fieldInfo.length"
                style="width:100%">
            </el-input>
            <div v-if="fieldInfo.type === 'image'" class="image-container">
                <div v-for="item in fileList" :key="item.objectKey">
                    <img :src="item.url" alt="" />
                    <span>
                        <i class="el-icon-zoom-in" @click="selectPicture(item)"></i>
                        <i class="el-icon-delete" @click="deletePicture(item)"></i>
                    </span>
                </div>
            </div>
            <el-upload
                v-if="fieldInfo.type === 'image'"
                :disabled="fileList.length >= 2"
                action="/api/commonservice/obsfile/uploadfile"
                :data="{ bucketname: 'face', folderpath: 'file' }"
                :before-upload="beforeAvatarUpload"
                :on-error="handleError"
                :on-exceed="handleExceed"
                :on-success="function(response,file,fileList){handleSuccess(response,file,fileList,fieldInfo)}"
                :show-file-list="false"
                class="file-upload">
                <el-button :disabled="fileList.length >= 2" size="small" type="primary">点击上传</el-button>          
            </el-upload>
        </template>
        <el-dialog title="预览" ref="previewDialog" :visible.sync="dialogVisible">
          <img v-if="dialogVisible" :src="currentImgSrc" width="100%">
        </el-dialog>
    </div>
</template>
<script>
import { getImageData } from "common/src/api/teacherinfo"
import selectForPage from 'common/src/components/common/selectForPage'
export default {
    name: "editDomInfo",
    props: {
        fieldInfo: {
            type: Object, 
            default: () => {}
        },
        options: {
            type: Array, 
            default: () => {
                return []
            }
        },
        citys: {
            type: Array,
            default: () => {
                return []
            }
        },
        endStation: {
            type: Array,
            default: () => {
                return []
            }
        },
        XJZYOptions: {
            type: Array,
            default: () => {
                return []
            }
        },
        ZYFXMCOptions: {
            type: Array,
            default: () => {
                return []
            }
        },
        unionCollegeData: {
            type: Array,
            default: () => {
                return []
            }
        },
        index: {
            type: Number,
            default: 0
        }
    },
    components: {
        'select-For-Page': selectForPage
    },
    data() {
        return {
            // 适用于pagerSelect下拉框的集合
            pagerSelectList: [
                'G_GJQU', // 国家地区
                'X_YX', // 学院
                'X_PYLB', // 培养类别
                'develop', // 培养方式
                'X_XZ', // 学制
                'X_RXFS', // 入学方式
                'X_LQLB', // 录取类别
                'X_DYWY', // 第一外国语
                'G_ML', // 门类,博士门类,硕士门类
                'G_XWDM', // 学位,硕士学位,博士学位
                'G_XJZT', // 学籍状态
                'X_ZZLX', // 资助类型
                'K_HZXX', // 合作学校
                'G_BYQX', // 毕业去向
                'K_KSLY', // 考生来源
                'X_KSFS', // 考试方式
                // 'K_ZY', // 学位专业,硕士学位专业,博士学位专业
                'K_PYCC', // 培养层次,硕士培养层次,博士培养层次
                'education', // 学历,硕士学历,博士学历
                'X_XWDW', // 毕业学校,学位单位,硕士毕业学校,硕士学位单位,博士毕业学校,博士学位单位
                'G_ZJLX', // 证件类型
                'G_MZ', // 民族
                'G_ZZMM', // 政治面貌
                'X_SKYY', // 授课语言
                'K_JFLY', // 经费来源
                'K_ZB', // 洲别
                'X_FX' // 专业方向名称
            ],
            // 关联关系集合
            ralationField: [
                "MAJOR_DIRECTION_CODE_", // 专业方向名称ID-70（学籍信息）
                "MAJOR_DIRECTION_NAME_", // 专业方向名称ID-70（学籍信息）
                "CULTURE_PROFESSION_", // 培养专业ID-69（学籍信息）
                "DEGREE_TYPE_", // 学位类型ID-153;博士学位类型ID-240;硕士学位类型ID-226（教育背景）/学位类型ID-96（学籍信息）
                "TRAINING_LEVEL_", // 培养层次ID-72（学籍信息）
                "CULTURE_LEVEL_", // 硕士培养层次ID-224;培养层次ID-151;博士培养层次ID-238（教育背景）
                "ORIGINAL_COLLEGE_COUNTRY_" // 原就读院校所属国家ID-247（联合培养）
            ],
            fileList: [],
            currentImgSrc: '',
            dialogVisible: false
        }
    },
    mounted() {
        this.$forceUpdate();
        if (this.fieldInfo.type === 'image') {
            this.getFilesList()
        }
        // console.log(this.options)
    },
    methods: {
        judgePagerSelect(dicKey) {
            return this.pagerSelectList.includes(dicKey)
        },
        // 获取导师工号
        getValueToLabel(val) {
            this.fieldInfo.columnValue = val
        },
        // 获取文件列表
        async getFilesList() {
            this.fileList = []
            let _this = this
            let fileArr = this.fieldInfo.columnValue ? this.fieldInfo.columnValue.split(';') : []
            if (fileArr.length > 0) {
                fileArr.forEach(async value => {
                    let currentResp = await getImageData(value)
                    if (currentResp.code === 200 && currentResp.data) {
                        this.fileList.push({
                            url: currentResp.data.base,
                            objectkey: value
                        })
                    }
                })
            }
        },
        // 上传前的回调
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg"
            const isPNG = file.type === "image/png"
            const isLt2M = file.size / 1024 / 1024 < 2
            let correct = false
            if (isJPG == false && isPNG == false) {
                this.$message.error("证书照片只能是JPG或PNG格式!");
            } else {
                correct = true
            }
            if (!isLt2M) {
                this.$message.error("证书照片大小不能超过 2MB!")
            }
            return correct && isLt2M
        },
        // 查看图片
        selectPicture(picItem) {
            this.dialogVisible = true
            this.currentImgSrc = picItem.url
        },
        // 删除图片
        deletePicture(picItem) {
            if (!this.fieldInfo.column === 'FILE_') return
            if (this.fieldInfo.columnValue) {
                let fileArr = this.fieldInfo.columnValue.split(';')
                let currentFileIndex = fileArr.indexOf(picItem.objectkey)
                fileArr.splice(currentFileIndex, 1)
                this.fieldInfo.columnValue = fileArr.join(';')
                let deleteIndex = this.fileList.findIndex(value => {
                   return value.objectkey === picItem.objectkey
                })
                this.fileList.splice(deleteIndex, 1)
            }
        },
        // 文件上传失败的回调
        handleError(err, file, fileList) {
            this.$message({
                type: "error",
                message: err
            })
        },
        // 上传成功的回调
        handleSuccess(response, file, fileList, fieldInfo) {
            if (!fieldInfo.column === 'FILE_') return
            if (fieldInfo.columnValue) {
                fieldInfo.columnValue += ";" + response.data[file.name].objectkey
            } else {
                fieldInfo.columnValue = response.data[file.name].objectkey
            }
            this.getFilesList()
        },
        // 修改年份
        gradeChange(val) {
            // 若修改的是当前年级
            if (this.fieldInfo.fieldId === 76) {
                this.$emit('change-current-grade', val)
            }
        },
        // 修改pagerSelect下拉框的值
        changePagerSelect(val) {
            this.$emit('change-pager-select', {
                'fieldInfo': this.fieldInfo,
                'val': val,
                'index': this.index
            })
        },
        // 修改普通下拉框的值
        handleRalationField(val) {
            if (this.ralationField.includes(this.fieldInfo.column)) {
                this.$emit('change-normal-select', {
                    'fieldInfo': this.fieldInfo,
                    'val': val,
                    'index': this.index
                })
            }
        },
        // 修改学位专业的类型，下拉框、输入框
        changeChooseType(val) {
            this.$emit('change-choose-type', {
                'fieldInfo': this.fieldInfo,
                'val': val,
                'index': this.index
            })
        }

    },
    watch: {
    }
};
</script>
<style lang="scss" scoped>
    .edit-dom-container ::v-deep {
        .image-container {
            text-align: center;
            div {
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 7px 0;
                span {
                    margin-left: 20px;
                    .el-icon-delete {
                        display: block;
                    }
                }
            }
            img {
                width: 148px;
                height: 148px;
            }
            i {
                font-size: 16px;
                cursor: pointer;
                z-index: 99999;
            }
        } 
        .file-upload {
            text-align: center;
        }
        .el-form-item {
            margin-bottom: 0!important;
        }
        .el-form-item__content {
            margin-left: 0!important;
        }
        .el-dialog__body {
            text-align: center;
            padding: 7px 10px;
            img {
                width: auto;
            }
        }
    }
</style>